/***********************布局***********************/
.flex-J-SB {
  display: flex;
  justify-content: space-between;
}
.flex-J-SA {
  display: flex;
  justify-content: space-around;
}
.flex-A-C {
  display: flex;
  align-items: center;
  align-content: center;
}
.info-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--gap-sm);
  & > * {
    text-align: center;
    &:nth-child(3n + 1) {
      justify-self: start;
    }
    &:nth-child(3n + 3) {
      justify-self: end;
    }
  }
}
.T-A-C {
  text-align: center;
}
.T-A-R {
  text-align: right;
}
.gridVar--col {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--gap-sm);
}
.gridVar--row {
  display: grid;
  grid-template-rows: repeat(var(--row), 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--gap-sm);
}
/***********************间距***********************/
.auto-mtVar--P {
  & > * + * {
    margin-top: var(--P);
  }
}
.auto-mlVar--P {
  & > * + * {
    margin-left: var(--P);
  }
}
.auto-mt-xs {
  & > * + * {
    margin-top: var(--gap-xs);
  }
}
.auto-ml-xs {
  & > * + * {
    margin-left: var(--gap-xs);
  }
}
.auto-mt-sm {
  & > * + * {
    margin-top: var(--gap-sm);
  }
}
.auto-ml-sm {
  & > * + * {
    margin-left: var(--gap-sm);
  }
}
.auto-mt-md {
  & > * + * {
    margin-top: var(--gap-md);
  }
}
.auto-ml-md {
  & > * + * {
    margin-left: var(--gap-md);
  }
}

.auto-mt-lg {
  & > * + * {
    margin-top: var(--gap-lg);
  }
}
.auto-ml-lg {
  & > * + * {
    margin-left: var(--gap-lg);
  }
}
.auto-mt-xl {
  & > * + * {
    margin-top: var(--gap-xl);
  }
}
.auto-ml-xl {
  & > * + * {
    margin-left: var(--gap-xl);
  }
}

.mt-xs {
  margin-top: var(--gap-xs);
}
.ml-xs {
  margin-left: var(--gap-xs);
}
.mt-sm {
  margin-top: var(--gap-sm);
}
.ml-sm {
  margin-left: var(--gap-sm);
}
.mt-md {
  margin-top: var(--gap-md);
}
.ml-md {
  margin-left: var(--gap-md);
}
.mt-lg {
  margin-top: var(--gap-lg);
}
.ml-lg {
  margin-left: var(--gap-lg);
}
.mt-xl {
  margin-top: var(--gap-xl);
}
.ml-xl {
  margin-left: var(--gap-xl);
}
/* 外边距、内边距全局样式 */
.padl(100);
.padl(@n, @i: 0) when (@i =< @n) {
  .pl-@{i} {
    padding-left: 0rem + @i;
  }
  .pr-@{i} {
    padding-right: 0rem + @i;
  }
  .pt-@{i} {
    padding-top: 0rem + @i;
  }
  .pb-@{i} {
    padding-bottom: 0rem + @i;
  }
  .ml-@{i} {
    margin-left: 0rem + @i;
  }
  .mr-@{i} {
    margin-right: 0rem + @i;
  }
  .mt-@{i} {
    margin-top: 0rem + @i;
  }
  .mb-@{i} {
    margin-bottom: 0rem + @i;
  }
  .padl(@n, (@i+1));
}

// @for $i from 0 through 80 {
//   .mt-#{$i} {
//     margin-top: #{$i}px !important;
//   }
//   .mr-#{$i} {
//     margin-right: #{$i}px !important;
//   }
//   .mb-#{$i} {
//     margin-bottom: #{$i}px !important;
//   }
//   .ml-#{$i} {
//     margin-left: #{$i}px !important;
//   }
//   .pt-#{$i} {
//     padding-top: #{$i}px !important;
//   }
//   .pr-#{$i} {
//     padding-right: #{$i}px !important;
//   }
//   .pb-#{$i} {
//     padding-bottom: #{$i}px !important;
//   }
//   .pl-#{$i} {
//     padding-left: #{$i}px !important;
//   }
// }
